<template>
	<view class="index">
		<!-- 选项卡 -->
		<!-- <view class="index-tab">
			<uni-segmented-control :current="tabIndex" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#2FCC71"></uni-segmented-control>
		</view> -->
		<view style="background-color: #ffffff;position: fixed;width: 100vw;left: 0;top: 0;">
			<u-tabs :list="items" :scrollable="false" lineColor="#2FCC71" keyName='dictLabel'
				@click="onClickItem"></u-tabs>
		</view>
		<!-- <view style="width: 100%;height: 2000rpx;background-color: aqua;">
			11111
		</view> -->
		<!-- 列表 -->
		<goods-list :listData="listData" :type="current"></goods-list>
		<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter backgroundColor="#fff" :tabBar="tabBar"
			color="#666" selectedColor="#2FCC71"></tui-tabbar>
	</view>
</template>

<script>
	import goodsList from '@/components/goodsList.vue'
	import circleProgress from '../../uni_modules/uview-ui/libs/config/props/circleProgress'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				tabIndex: 0,
				loadMore: true,
				pageNum: 1,
				pageSize: 20,
				listData: [], // 精选推荐列表数据
				items: [],
				batchNo: 1,
				current: 0,
				tabBar: [{
						// pagePath: '/pages/business/businessMy/index',
						text: '分拣任务',
						iconPath: '/static/img/icon_achievement.png',
						selectedIconPath: '/static/img/icon_achievement_s.png',
						// num: 1,
						// isDot: false
					},
					{
						// pagePath: '/pages/business/businessMy/index',
						text: '分拣记录',
						iconPath: '/static/img/icon_schedule.png',
						selectedIconPath: '/static/img/icon_schedule_s.png',
						// num: 1,
						// isDot: false
					},


				],
			}
		},
		onLoad() {
			this.getBatchNos()
		},
		onShow() {
			this.refresh()
		},
		// 下拉刷新
		onPullDownRefresh() {
			uni.showNavigationBarLoading()
			this.refresh()
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.loadMore) {
				this.pageNum = this.pageNum + 1
				this.getList()
			}
		},
		methods: {
			// 获取
			refresh() {
				this.loadMore = true
				this.listData = []
				this.pageNum = 1
				this.getList()
			},
			//查询批次
			async getBatchNos() {
				const res = await this.$apis.sort.batchNos()
				this.items = res.data
				// this.batchNo = this.items[0].dictValue
				// this.getList()
			},
			// 获取精选推荐列表
			async getList() {
				let data = []
				if (this.current == 0) {
					const res = await this.$apis.sort.list({
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						batchNo: this.batchNo
					})
					data = res.data
				} else {
					data = await this.$apis.sort.historyList({
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						batchNo: this.batchNo
					})
				}
				this.listData = [...this.listData, ...data.rows]
				if (this.listData.length >= data.total) {
					this.loadMore = false
				}
			},
			tabbarSwitch(e) {
				if (this.current != e.index) {
					this.current = e.index;
					this.refresh()
				}

			},
			onClickItem(e) {
				console.log(e);
				this.batchNo = e.dictValue
				this.refresh()
				// if (this.tabIndex != e.currentIndex) {
				// 	this.tabIndex = e.currentIndex;
				// 	this.refresh()
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	.index {
		padding: 0px 20rpx 40rpx 20rpx;
		padding-top: 44px;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;

		.index-tab {
			width: 100%;
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
		}
	}
</style>